<template>
	<view class="wapper">
		<view class="money">
			<view class="price">
				<view>
					最多 <text>200元</text>
				</view>
				<view class="end_time">
					距离结束时间：{{expires_date}}
				</view>
			</view>

			<view class="progress">
				<view class="progress_bar" :style="{width:progress+'%'}"></view>
				<view class="progress_sign" :style="{left:calc(progress-2)+'%'}">
					<image src="../../../static/image/index/progress_sign.png" mode="widthFix"></image>
				</view>
				<view class="percentage" :style="{left:calc(progress-5) +'%'}">
					{{progress}}%
				</view>
			</view>
			<view class="receive" :class="(is_all_complete&&isReceive)?'receive_active':''" @click="open">
				{{isReceive?'点击领取红包':"已领取"}}
			</view>
		</view>
		<view class="newcomer_mission">
			<view class="newcomer_mission_title">
				新人任务
			</view>
			<view class="newcomer_mission_body">
				<view class="newcomer_mission_body_item" v-for="(item,index) in list" @click="participate(item)"
					:key='index'>
					<view>
						{{item.name}}
					</view>
					<view class="finish" :class="{participate:item.is_complete == 0}">
						{{item.is_complete == 0?"去参与":"已完成"}}
					</view>
				</view>
			</view>
		</view>
		<view class="newcomer_mission_title">
			奖励列表
		</view>
		<view class="reward_list">
			<swiper circular vertical :display-multiple-items='5' :autoplay="true" :interval="3000"
				style="height: 100%;">
				<swiper-item v-for="(item,index) in reward_list" :key='index'>
					<view class="swiper-item">
						<view>{{item.nickname |replaceName }}，用时{{item.create_date}}分钟完成任务获得 <text
								class='active_price'>{{item.amount}}</text>红包奖励</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<uni-popup ref="popup" :animation="true">
			<view class="red_bag">
				<view class="ba_img">
					<image :src="IMGLink+'/index/red-packet-'+(isShowMoney?1:2)+'.png'" mode=""></image>
				</view>
				<view class="open" :class="{open_animation:isOpen}" @click="open_red" v-show="!isShowMoney">
					<image :src="IMGLink+'/index/open.png'" mode=""></image>
				</view>
				<view v-show="isShowMoney" class="show_text">
					<view style="margin-bottom: 32rpx;font-size: 36rpx;">恭喜您获得新手红包</view>
					<view style="margin-bottom: 10rpx;font-size: 80rpx;">{{amount}} <text
							style="font-size: 36rpx;">元</text>
					</view>
					<view style="margin-bottom: 300rpx;font-size: 32rpx;">红包已存入-我的-红包</view>
					<view class="use_red" @click="close">
						收下红包
					</view>
				</view>
				<view class="close" v-show="!isShowMoney">
					<uni-icons type="close" size="35" color="#FFFFFF" @click="close"></uni-icons>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		newUserTask,
		newUserGetRedPackages
	} from '@/api/index/index'
	export default {
		data() {
			return {
				progress: 0,
				reward_list: [],
				list: [],
				isOpen: false,
				isShowMoney: false,
				IMGLink: this.IMGLink,
				is_all_complete: 0,
				amount: 0,
				isReceive: true,
				expires_date: null
			}
		},
		onLoad() {
			newUserTask().then(({
				data: {
					is_all_complete,
					otherTaskInfo,
					is_get_red_packages,
					taskInfo,
					expires_date
				}
			}) => {
				this.list = taskInfo;
				this.is_all_complete = is_all_complete;
				this.isReceive = is_get_red_packages == 0;
				let index = 0;
				taskInfo.forEach(e => {
					if (e.is_complete == 1) {
						index += 1
					}
				})
				this.progress = this.getProgress(index);
				this.reward_list = otherTaskInfo;
				this.countDownTime(expires_date)

			})
		},
		filters: {
			replaceName(str) {
				if (!str) return '***';
				return str.toString().replace(/^(.).+(.)$/g, "$1*$2");
			}
		},
		methods: {
			countDownTime(expires_date) {
				const time = new Date(expires_date * 1000).getTime() - Date.now();
				const hours = this.toZero(Math.floor(time / (60 * 60 * 1000)));
				const minutes = this.toZero(Math.floor(time / (60 * 1000) % 60));
				const seconds = this.toZero(Math.floor(time / (1000) % 60));
				this.expires_date = `${hours}:${minutes}:${seconds}`
				if (time > 0) {
					setTimeout(() => {
						this.countDownTime(expires_date)
					}, 1000)
				} else {
					this.$store.dispatch("updateUserInfo");
				}
			},
			toZero(s) {
				return s > 9 ? s : '0' + s
			},
			getProgress(i) {
				switch (i) {
					case 0:
						return 0;
					case 1:
						return 98;
					case 2:
						return 99;
					case 3:
						return 100;
				}
			},
			participate({
				topic_type,
				is_complete
			}) {
				if (is_complete == 0) {
					uni.navigateTo({
						url: '/pages/index/free-deposit/free-deposit?isShowBanner=1&type=' + topic_type
					})
				}
			},
			calc(n) {
				return n < 0 ? 0 : n
			},
			open_red() {
				this.isOpen = true;
				const time = Date.now();
				newUserGetRedPackages().then(({
					data: {
						amount
					}
				}) => {
					this.amount = amount;
					const difference = Date.now() - time;
					setTimeout(() => {
						this.isShowMoney = true;
						this.isOpen = false;
						this.isReceive = false;
						this.$store.dispatch("updateUserInfo")
					}, 1000 - difference)
				})
			},
			open() {
				if (this.is_all_complete == 1 && this.isReceive) {
					this.$refs.popup.open('center')
				}
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #FFFFFF;
		font-family: PingFangSC-Regular, PingFang SC;
	}

	.wapper {
		box-sizing: border-box;
		padding: 20rpx 25rpx;
	}

	.money {
		height: 368rpx;
		background: rgb(254 243 243);
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
	}

	image {
		width: 100%;
	}

	.price {
		font-size: 26rpx;
		font-weight: 400;
		color: #0A0C0D;
		text-align: center;
		margin-top: 28rpx;
		margin-bottom: 38rpx;
	}

	.price text {
		font-size: 40rpx;
		color: #F54642
	}

	.end_time {
		margin-top: 4rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #727272;
	}

	.progress {
		margin: 0 auto;
		width: 632rpx;
		height: 20rpx;
		background: #FDD3D3;
		border-radius: 10rpx;
		position: relative;
	}

	.progress_bar {
		height: 100%;
		background-color: #F54642;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.progress_sign {
		position: absolute;
		top: -35rpx;
		width: 24rpx;
		height: 12rpx;
	}

	.percentage {
		position: absolute;
		bottom: -50rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #F54642;
	}

	.receive {
		margin: 0 auto;
		width: 440rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #faaeac;
		border-radius: 42rpx;
		margin-top: 84rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.receive_active {
		background-color: #F54642;
	}

	.newcomer_mission {
		margin-bottom: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #0A0C0D;
	}

	.newcomer_mission_title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 26rpx;
	}

	.newcomer_mission_body_item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.newcomer_mission_body>.newcomer_mission_body_item:last-child {
		margin-bottom: 0;
	}

	.finish {
		width: 116rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #A5A5A5;
		border-radius: 42rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.participate {
		background: #F54642;
	}

	.reward_list {
		height: 546rpx;
		background: rgb(254 243 243);
		box-sizing: border-box;
		padding: 50rpx 85rpx;
	}

	.swiper-item {
		font-size: 24rpx;
		font-weight: 400;
		color: #3C3C3C;
		display: flex;
		align-items: center;
		height: 100%;
	}

	.active_price {
		font-size: 28rpx;
		color: #F54642;
	}

	.red_bag {
		position: relative;
		width: 590rpx;
		height: 902rpx;
	}

	.close {
		position: absolute;
		right: -40rpx;
		top: -100rpx;
	}

	.open {
		width: 204rpx;
		height: 204rpx;
		position: absolute;
		left: 50%;
		bottom: 134rpx;
		margin-left: -102rpx;
		perspective: 1000;
	}

	image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.open_animation {
		animation: myanimation 2s linear infinite;
	}

	@keyframes myanimation {
		from {
			transform: rotateY(0deg);
		}

		to {
			transform: rotateY(720deg);
		}
	}

	.show_text {
		text-align: center;
		color: #C8393C;
		padding-top: 158rpx;
	}

	.use_red {
		margin: 0 auto;
		overflow: hidden;
		width: 538rpx;
		height: 102rpx;
		background: linear-gradient(90deg, #FED9AE 0%, #FFC28E 100%);
		line-height: 102rpx;
		font-size: 44rpx;
		font-weight: 400;
		border-radius: 12rpx;
	}

	.ba_img {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
	}
</style>
